<template>
  <div>
    <!-- 注册 -->
    <div class="register">
      <div class="register_top">
        <!-- <div>+</div> -->
        <h2>欢迎注册</h2>
        <!-- 取消用户头像上传 -->
        <!-- <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-change="getFile"
          :accept="mime"
          :multiple="true"
          :limit="1"
        > -->
          <img
            v-if="imageUrl"
            style="width: 90px; height: 100px; border-radius: 50px;"
            :src="strimagebase64_2"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        <!-- </el-upload> -->
        <!-- <h3>默认用户头像,可点击修改</h3> -->
      </div>
      <div class="register_bottom">
        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="loginForm.userName"
              placeholder="请输入注册用户名"
              prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="loginForm.email"
              type="email"
              autocomplete="off"
              placeholder="请输入注册邮箱"
              prefix-icon="Message"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              autocomplete="off"
              placeholder="请输入注册密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              v-model="loginForm.password2"
              type="password"
              autocomplete="off"
              placeholder="请确认注册密码"
              prefix-icon="Lock"
              @keyup.enter="reg"
            />
          </el-form-item>

          <el-form-item class="register-tools">
            <el-button
              style="width: 100%"
              type="primary"
              class="item btnRegister"
              @click="reg()"
              >用户注册</el-button
            >
          </el-form-item>
        </el-form>

        <div>
          <span>已经有账号?前往</span>
          <a style="color: blue" @click="login"> 登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { userReg } from "../../http/user.js";
export default {
  data() {
    return {
      loginForm: {
        email: "",
        userName: "",
        password: "",
        password2: "",
      },
      strimagebase64: "",
      strimagebase64_2: "src/assets/img/user_img.jpg",
      imageUrl: "src/assets/img/user_img.jpg",
      rules: {
        userName: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
          {
            min: 8,
            max: 20,
            message: "名称的长度在8到20之间",
            triggler: "blur",
          },
        ],
        email: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
          { type: "email", message: "请输入正确格式的邮箱" },
        ],
        password: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
          {
            min: 8,
            max: 20,
            message: "密码的长度在8到20之间",
            triggler: "blur",
          },
        ],
        password2: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
          {
            min: 8,
            max: 20,
            message: "密码的长度在8到20之间",
            triggler: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    reg() {
      var that = this;
      if (this.loginForm.password == this.loginForm.password2) {
        let data = this.loginForm;
        this.$refs["ruleFormRef"].validate(function (valid) {
          if (valid) {
            userReg(data)
              .then((res) => {
                console.log(res);
                if (res.code == 1) {
                  ElMessage.closeAll();
                  ElMessage({
                    message: "注册" + res.msg,
                    type: "success",
                  });
                  localStorage.setItem("userimg", that.imageUrl);
                  // 清空输入框
                  that.remake();
                } else {
                  ElMessage.closeAll();
                  ElMessage({
                    message: "注册" + res.msg,
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                // console.log(err);
              });
          } else {
            console.log("error submit!");
            return false;
          }
        });
      } else {
        ElMessage.closeAll();
        ElMessage({
          message: "两次密码不一致",
          type: "warning",
        });
      }
    },
    remake() {
      this.loginForm = {
        email: "",
        password: "",
        userName: "",
        repassword: "",
      };
    },
    getFile(file, fileList) {
      this.getBase64(file.raw).then((res) => {
        const params = res.split(",");
        // console.log(params, "params");
        if (params.length > 0) {
          this.strimagebase64 = params[0] + "," + params[1];
          this.imageUrl = this.strimagebase64;
        }
      });
    },
    // 获取图片转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
          // console.log(imgResult);
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>

<style  scoped>
.reg {
}
/* 清除内、外间距 */
* {
  margin: 0;
  padding: 0;
}

/* 去除a标签的下划线 */
a {
  text-decoration: none;
}

/* 去除li标签的序列符号（小黑点） */
li {
  list-style: none;
}

body {
  background-image: linear-gradient(to right, #3e9597, #214c52);
}

.box {
  /* 分布式布局 */
  display: flex;
  justify-content: center;
}

/* 登录、注册外div共同样式 */
.register {
  width: 100%;
  /* width: 20rem; */
  height: 30.5rem;
  background-color: white;
  border-radius: 0.5rem;
  margin: 0 auto;
}

/* 登录、注册顶部div共同样式 */
.register_top {
  width: 100%;
  height: 12rem;
  color: white;
  /* border-radius: 0.5rem 0.5rem 0 0; */
  text-align: center;
}

.register_top {
  background: rgb(6, 44, 170), 149, 151, 0.507);
}

.register_top {
  /* padding-top: 2.5rem; */

  /* 添加内间距防止div扩充 */
  box-sizing: border-box;
  text-align: center;
  height: 10rem;
}

.register_top div {
  width: 90px;
  height: 100px;
  background: white;
  /* border-radius: 10rem; */
  color: silver;
  font-size: 4rem;

  margin: 0 auto;
  text-align: center;
  line-height: 5.5rem;
  border-radius: 50px;
}

.register_bottom {
  text-align: center;
  padding: 1rem 1rem 0 1rem;
}

/* 登录、注册表单共同样式 */

.register_bottom .input {
  /* width: 17.5rem; */
  width: 100%;
  height: 2.5rem;
  margin-top: 1rem;
  padding-left: 0.6rem;
  border-radius: 0.6rem;
  border: 0.1rem solid silver;
  /* 去除表单点击后出现的边框 */
  outline: none;
  color: reb(107, 107, 107);
}

.register_bottom p {
  font-size: 0.8rem;
  margin-top: 1rem;
}

.register_bottom p span {
  margin-right: 0.5rem;
  color: #757575;
}

.register_bottom p a {
  color: #214c52;
}

/* 登录、注册按钮共同样式 */

.register_bottom button {
  width: 18rem;
  height: 2.8rem;
  color: white;

  border-radius: 0.6rem;
  border: none;
}

.register_bottom button {
  background: rgb(92, 17, 233);
}

/* 鼠标滑过按钮出现阴影效果 */

.register_bottom button:hover {
  box-shadow: 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.3);
}
:deep .el-upload,
.el-upload--text {
  width: 90px;
  height: 100px;
  background-color: white;
  border-radius: 100px;
}

:deep .el-form-item__content {
  display: block;
}
</style>